<template>
  <div class="SetImageSetting">
    <div class="filter">
      <el-form :model="filterForm" ref="filterForm" label-width="100px">
        <el-form-item label="设备区域:">
          <div class="el_consist" :style="'height:' + (d_a_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="d_a_isIndeterminate"
              v-model="d_a_CheckAll"
              @change="handle_d_a_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group
              v-model="filterForm.deviceAreasCheckList"
              @change="handleCheckChange"
            >
              <el-checkbox
                v-for="item in deviceAreasList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="deviceAreasList.length > nRowCount"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="d_a_CheckMore"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="设备类型:">
          <div class="el_consist" :style="'height:' + (d_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="d_t_isIndeterminate"
              v-model="d_t_CheckAll"
              @change="handle_d_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.deviceTypeCheckList" @change="handleCheckChange">
              <el-checkbox
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.displayName}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="deviceTypeList.length > nRowCount"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="d_t_CheckMore"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="识别类型:">
          <div class="el_consist" :style="'height:' + (r_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="r_t_isIndeterminate"
              v-model="r_t_CheckAll"
              @change="handle_r_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group
              v-model="filterForm.recognitionTypeCheckList"
              @change="handleCheckChange"
            >
              <el-checkbox
                v-for="item in recognitionTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="recognitionTypeList.length > nRowCount"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="r_t_CheckMore"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="表计类型:">
          <div class="el_consist" :style="'height:' + (m_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="m_t_isIndeterminate"
              v-model="m_t_CheckAll"
              @change="handle_m_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group v-model="filterForm.meterTypeCheckList" @change="handleCheckChange">
              <el-checkbox
                v-for="item in meterTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="meterTypeList.length > nRowCount"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="m_t_CheckMore"
          >查看更多</el-checkbox>
        </el-form-item>
        <el-form-item label="设备外观类型:">
          <div class="el_consist" :style="'height:' + (d_a_t_CheckMore ? 'auto' : '31px')">
            <el-checkbox
              class="allCheckBox"
              :label="0"
              name="type"
              :indeterminate="d_a_t_isIndeterminate"
              v-model="d_a_t_CheckAll"
              @change="handle_d_a_t_CheckAllChange"
            >全部</el-checkbox>
            <el-checkbox-group
              v-model="filterForm.deviceAppearanceTypeCheckList"
              @change="handleCheckChange"
            >
              <el-checkbox
                v-for="item in deviceAppearanceTypeList"
                :key="item.id"
                :label="item.id"
                name="type"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <el-checkbox
            v-if="deviceAppearanceTypeList.length > nRowCount"
            class="moreCheckBox"
            label="all"
            name="type"
            v-model="d_a_t_CheckMore"
          >查看更多</el-checkbox>
        </el-form-item>
        <div class="operation">
          <el-form-item label="开始时间:">
            <el-date-picker
              v-model="taskListParm.startTime"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
              :picker-options="startPickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间:">
            <el-date-picker
              v-model="taskListParm.endTime"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
              :picker-options="endPickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-button class="but-query" type="text" size="medium" @click="getTaskHistorysList">
            <i class="query-icon"></i>查询
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="content">
      <div class="content-first">
        <div class="block-head">历史任务列表</div>
        <div class="content-list">
          <el-table
            ref="pointsTable"
            :data="taskList"
            border
            size="mini"
            class="el-table-redefine"
            style="width: 100%"
            height="100%"
            highlight-current-row
            @row-click="onRowClick"
          >
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="task.name" label="任务名称"></el-table-column>
            <el-table-column prop="createTime" label="开始时间" width="150"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="content-second">
        <div class="block-head">点位列表</div>
        <div class="content-list">
          <el-table
            ref="pointsTable"
            :data="pointList"
            border
            size="mini"
            class="el-table-redefine"
            style="width: 100%"
            height="100%"
            highlight-current-row
            @row-click="pointRowClick"
          >
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="point.name" label="点位名称"></el-table-column>
          </el-table>
        </div>
      </div>
      <div id="content_third" class="content-third">
        <div class="block-head">图片</div>
        <ul>
          <li v-for="item in picList" :key="item.url">
            <img class="item-img" :src="item.url" alt />
          </li>
        </ul>
      </div>
      <div class="content-four">
        <div class="block-head">
          <span>点位设置</span>
          <el-button class="but-save" type="text" size="medium" @click="saveClick">
            <i class="save-icon"></i>保存
          </el-button>
        </div>
        <el-form
          class="four-content"
          ref="pointForm"
          :model="pointSetting"
          :rules="pointFormRules"
          size="mini"
          label-width="150px"
        >
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="表计宽度（mm）:" prop="width">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  v-model="pointSetting.pointVisibleLight.width"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                  maxlength="15"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="表计长度（mm）:" prop="height">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  v-model="pointSetting.pointVisibleLight.height"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                  maxlength="15"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="测量下限:" prop="rangeMin">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  v-model="pointSetting.meterPointInfo.rangeMin"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                  maxlength="15"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="测量上限:" prop="rangeMax">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  v-model="pointSetting.meterPointInfo.rangeMax"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                  maxlength="15"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="模型表计类型:" prop="reconModelSubId">
                <el-select
                  size="mini"
                  clearable
                  placeholder="请选择"
                  v-model="pointSetting.reconModelSubId"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                >
                  <el-option
                    v-for="item in recognitionSubModelsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="模型表计方向:" prop="direction">
                <el-select
                  size="mini"
                  clearable
                  placeholder="请选择"
                  v-model="pointSetting.meterPointInfo.direction"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                >
                  <el-option
                    v-for="item in directionList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="模型表计起始角度:" prop="angleMax">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  v-model="pointSetting.meterPointInfo.angleMax"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                  maxlength="15"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="模型表计终止角度:" prop="angleMin">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  v-model="pointSetting.meterPointInfo.angleMin"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                  maxlength="15"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="模型表计默认值:" prop="defaultValue">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  v-model="pointSetting.defaultValue"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                  maxlength="15"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="模型表计修正值:" prop="offsetValue">
                <el-input
                  size="mini"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  v-model="pointSetting.meterPointInfo.offsetValue"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                  maxlength="15"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item size="mini" label="预置位设置:" prop="calcOnOff">
                <el-select
                  size="mini"
                  clearable
                  placeholder="请选择"
                  v-model="pointSetting.calcOnOff"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                >
                  <el-option
                    v-for="item in calcOnOffList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <!-- <el-switch
                  :width="60"
                  active-color="#109CB4"
                  inactive-color="#afafaf"
                  active-text="开"
                  inactive-text="关"
                  :active-value="1"
                  :inactive-value="0"
                  v-model="pointSetting.calcOnOff"
                  :disabled="checkPoint && checkPoint.id ? false : true"
                ></el-switch>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="13">
              <el-form-item size="mini" label="机器读数:" prop="fPAngle">
                <span>{{this.checkPoint ? matchArrayContentStr(this.checkPoint.value, meterReadingDealWith) : "未知"}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item size="mini" label="修正值:" prop="fPAngle" label-width="60px">
                <span>{{this.checkPoint.modifyValue}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-tabs type="card">
            <el-tab-pane label="预置值">
              <el-row>
                <el-col :span="22">
                  <el-form-item size="mini" label="正向俯仰角:" prop="fPAngle">
                    <el-input
                      size="mini"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      v-model="pointSetting.fPAngle"
                      :disabled="checkPoint && checkPoint.id ? false : true"
                      maxlength="15"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22">
                  <el-form-item size="mini" label="正向水平角:" prop="fHAngle">
                    <el-input
                      size="mini"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      v-model="pointSetting.fHAngle"
                      :disabled="checkPoint && checkPoint.id ? false : true"
                      maxlength="15"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22">
                  <el-form-item size="mini" label="正向放大倍数:" prop="fMult">
                    <el-input
                      size="mini"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      v-model="pointSetting.fMult"
                      :disabled="checkPoint && checkPoint.id ? false : true"
                      maxlength="15"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22">
                  <el-form-item size="mini" label="反向俯仰角:" prop="bPAngle">
                    <el-input
                      size="mini"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      v-model="pointSetting.bPAngle"
                      :disabled="checkPoint && checkPoint.id ? false : true"
                      maxlength="15"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22">
                  <el-form-item size="mini" label="反向水平角:" prop="bHAngle">
                    <el-input
                      size="mini"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      v-model="pointSetting.bHAngle"
                      :disabled="checkPoint && checkPoint.id ? false : true"
                      maxlength="15"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22">
                  <el-form-item size="mini" label="反向放大倍数:" prop="bMult">
                    <el-input
                      size="mini"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      v-model="pointSetting.bMult"
                      :disabled="checkPoint && checkPoint.id ? false : true"
                      maxlength="15"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="预制位">
              <el-row>
                <el-col :span="22">
                  <el-form-item size="mini" label="正向预置位" prop="fPresetNo">
                    <el-input
                      size="mini"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      v-model="pointSetting.fPresetNo"
                      :disabled="checkPoint && checkPoint.id ? false : true"
                      maxlength="15"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22">
                  <el-form-item size="mini" label="反向预置位:" prop="bPresetNo">
                    <el-input
                      size="mini"
                      oninput="value=value.replace(/[^0-9.]/g,'')"
                      v-model="pointSetting.bPresetNo"
                      :disabled="checkPoint && checkPoint.id ? false : true"
                      maxlength="15"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import {
  devicesAreas,
  devicesTypesList,
  reconTypesList,
  meterTypesList,
  faceTypesList,
  taskHistorysList,
  pointHistoryList,
  pointsTree,
  pointsUpdate,
  getPointsSetting,
  saveTypesList,
  reconModelSubsList,
  postOperationLogs
} from "@/api/apiManagement";
import Viewer from "viewerjs";
import { dateToDateStr, getDateTopMonth } from "@/utils/utilsMethod";
import { matchArrayContent, MeterReadingDealWith } from "@/utils/constant";

export default {
  data() {
    return {
      robot_id: null,
      deviceAreasList: [],
      deviceTypeList: [],
      recognitionTypeList: [],
      meterTypeList: [],
      deviceAppearanceTypeList: [],
      recognitionSubModelsList: [],

      nRowCount: 0,
      d_a_isIndeterminate: false,
      d_a_CheckAll: false,
      d_a_CheckMore: false,
      d_t_isIndeterminate: false,
      d_t_CheckAll: false,
      d_t_CheckMore: false,
      r_t_isIndeterminate: false,
      r_t_CheckAll: false,
      r_t_CheckMore: false,
      m_t_isIndeterminate: false,
      m_t_CheckAll: false,
      m_t_CheckMore: false,
      d_a_t_isIndeterminate: false,
      d_a_t_CheckAll: false,
      d_a_t_CheckMore: false,

      filterForm: {
        deviceAreasCheckList: [],
        deviceTypeCheckList: [],
        recognitionTypeCheckList: [],
        meterTypeCheckList: [],
        deviceAppearanceTypeCheckList: [],
        isUse: 1
      },

      taskListParm: {
        robotId: 1,
        startTime: "",
        endTime: "",
        page: 1,
        size: 0
      },
      taskList: [],
      checkTask: {},

      AllDeviceTreeList: [],
      deviceTreeList: [],
      treePointList: [],

      pointListParm: {
        taskHistoryId: "",
        page: 1,
        size: 0
      },
      pointList: [],
      checkPoint: {},

      picList: [],

      pointSetting: {
        substationId: null,
        areaId: null,
        intervalId: null,
        deviceId: null,
        pointId: null,
        bHAngle: null,
        bMult: null,
        bPAngle: null,
        bPresetNo: null,
        calcOnOff: null,
        coef: null,
        defaultValue: null,
        deviceName: "",
        displayName: "",
        fHAngle: null,
        fMult: null,
        fPAngle: null,
        fPresetNo: null,
        faceTypeId: null,
        hotTypeId: null,
        isAlarm: null,
        isSave: null,
        isShow: null,
        isUse: null,
        meterTypeId: null,
        name: "",
        nis: null,
        reconModelSubId: null,
        reconTypeId: null,
        saveTypeId: null,
        unit: "",
        watchPosId: null,
        x: null,
        y: null,
        z: null,
        reconModelSub: {
          description: "",
          displayName: "",
          id: null,
          name: "",
          reconModelId: null
        },
        pointVisibleLight: {
          id: null,
          width: null,
          height: null
        },
        meterPointInfo: {
          angleMax: null,
          angleMin: null,
          direction: null,
          id: null,
          meterTypeId: null,
          offsetValue: null,
          rangeMax: null,
          rangeMin: null
        }
      },
      saveTypesList: [],
      directionList: [
        {
          id: 0,
          name: "up"
        },
        {
          id: 1,
          name: "down"
        }
      ],
      calcOnOffList: [
        {
          id: 0,
          name: "自动校准"
        },
        {
          id: 1,
          name: "预置值"
        },
        {
          id: 2,
          name: "预置位"
        }
      ],

      pointFormRules: {},

      viewer: null,

      startPickerOptions: {
        disabledDate: time => {
          let endTime =
            this.taskListParm.endTime === null ? "" : this.taskListParm.endTime;
          return (
            time.getTime() > new Date(endTime).getTime() ||
            time.getTime() > Date.now() - 8.64e6
          );
        }
      },
      endPickerOptions: {
        disabledDate: time => {
          let startTime =
            this.taskListParm.startTime === null
              ? ""
              : this.taskListParm.startTime;
          return (
            time.getTime() <
              new Date(startTime).getTime() - 8 * 60 * 60 * 1000 ||
            time.getTime() > Date.now() - 8.64e6
          ); //如果没有后面的-8.64e6就是不可以选择今天的   减去一天的时间代表可以选择同一天
        }
      },
      meterReadingDealWith: MeterReadingDealWith
    };
  },
  watch: {},
  computed: {},
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    this.taskListParm.robotId = this.robot_id;

    this.taskListParm.startTime = dateToDateStr(getDateTopMonth(new Date()));
    this.taskListParm.endTime = dateToDateStr(new Date());
    // 设备区域
    this.getDevicesAreas();
    // 设备类型
    this.getDevicesTypesList();
    // 识别类型
    this.getReconTypesList();
    // 表计类型
    this.getMeterTypesList();
    // 设备外观类型
    this.getFaceTypeList();
    // 设备树
    this.getPointsTree();
    // 历史任务列表
    this.getTaskHistorysList();
    // 表计保存类型
    this.getSaveTypesList();
    // 识别类型
    this.getReconModelsSubsList();
  },
  mounted() {
    this.nRowCount =
      document.getElementsByClassName("el_consist")[0].clientWidth / 251;
    // 监听窗口大小
    window.onresize = () => {
      this.nRowCount =
        document.getElementsByClassName("el_consist")[0].clientWidth / 251;
    };
  },
  methods: {
    // =================== 接口请求区域 ==================== //
    // 设备区域
    getDevicesAreas() {
      devicesAreas()
        .then(response => {
          if (response) {
            this.deviceAreasList = response;
          }
        })
        .catch(() => {});
    },
    // 设备类型
    getDevicesTypesList() {
      devicesTypesList()
        .then(response => {
          if (response.list) {
            this.deviceTypeList = response.list.filter(item => {
              return parseInt(item.name) >= 2000;
            });
          }
        })
        .catch(() => {});
    },
    // 识别类型
    getReconTypesList() {
      reconTypesList()
        .then(response => {
          if (response.list) {
            this.recognitionTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 表计类型
    getMeterTypesList() {
      meterTypesList()
        .then(response => {
          if (response.list) {
            this.meterTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 设备外观类型
    getFaceTypeList() {
      faceTypesList()
        .then(response => {
          if (response.list) {
            this.deviceAppearanceTypeList = response.list;
          }
        })
        .catch(() => {});
    },
    // 保存类型
    getSaveTypesList() {
      saveTypesList()
        .then(response => {
          if (response.list) {
            this.saveTypesList = response.list;
          }
        })
        .catch(() => {});
    },
    // 点位树
    getPointsTree() {
      pointsTree()
        .then(response => {
          if (response) {
            this.AllDeviceTreeList = response;
            this.AllDeviceTreeList = this.deepRecursionTraversal(response);
            let tempList = JSON.parse(JSON.stringify(response));
            let rev = node => {
              node.map(item => {
                if (item.modelLevel) {
                  if (item.modelLevel === 1000) {
                    this.substationName = item.name;
                  }
                }
              });
            };
            rev(tempList);
            this.filterTree();
          }
        })
        .catch(() => {});
    },
    // 获取任务列表
    getTaskHistorysList() {
      this.taskListParm.startTime =
        this.taskListParm.startTime == null ? "" : this.taskListParm.startTime;
      this.taskListParm.endTime =
        this.taskListParm.endTime == null
          ? ""
          : this.taskListParm.endTime.length <= 10 &&
            this.taskListParm.endTime.length != 0
          ? this.taskListParm.endTime + " 24:00:00"
          : this.taskListParm.endTime;
      taskHistorysList(this.taskListParm)
        .then(response => {
          if (response) {
            this.taskList = response.list;

            this.pointList = [];
            this.picList = [];
            this.checkPoint = {};
            this.pointSetting = {
              substationId: null,
              areaId: null,
              intervalId: null,
              deviceId: null,
              pointId: null,
              bHAngle: null,
              bMult: null,
              bPAngle: null,
              bPresetNo: null,
              calcOnOff: null,
              coef: null,
              defaultValue: null,
              deviceName: "",
              displayName: "",
              fHAngle: null,
              fMult: null,
              fPAngle: null,
              fPresetNo: null,
              faceTypeId: null,
              hotTypeId: null,
              isAlarm: null,
              isSave: null,
              isShow: null,
              isUse: null,
              meterTypeId: null,
              name: "",
              nis: null,
              reconModelSubId: null,
              reconTypeId: null,
              saveTypeId: null,
              unit: "",
              watchPosId: null,
              x: null,
              y: null,
              z: null,
              reconModelSub: {
                description: "",
                displayName: "",
                id: null,
                name: "",
                reconModelId: null
              },
              pointVisibleLight: {
                id: null,
                width: null,
                height: null
              },
              meterPointInfo: {
                angleMax: null,
                angleMin: null,
                direction: null,
                id: null,
                meterTypeId: null,
                offsetValue: null,
                rangeMax: null,
                rangeMin: null
              }
            };
          }
        })
        .catch(() => {});
    },
    // 获取点位信息
    getPointHistoryList() {
      if (this.checkTask && this.checkTask.id) {
        this.pointListParm.taskHistoryId = this.checkTask.id;
        var parm = this.pointListParm;
        if (this.treePointList.length > 0) {
          var pointIds = "";
          this.treePointList.forEach(item => {
            var pointId = item.point.id;
            pointIds += pointId.split("_")[1] + ",";
          });
          parm["pointIds"] = pointIds;
        }
        pointHistoryList(parm)
          .then(response => {
            this.pointList = response.list;
          })
          .catch(() => {});
      }
    },
    // 获取点位设置
    getPointsSetting() {
      getPointsSetting({}, this.checkPoint.point.id)
        .then(response => {
          if (response) {
            this.pointSetting = response;
            if (!this.pointSetting.meterPointInfo) {
              this.pointSetting.meterPointInfo = {
                angleMax: null,
                angleMin: null,
                direction: null,
                id: null,
                meterTypeId: null,
                offsetValue: null,
                rangeMax: null,
                rangeMin: null
              };
            }
          }
        })
        .catch(() => {});
    },
    getReconModelsSubsList() {
      reconModelSubsList({
        page: 1,
        size: 0,
        reconModelId: 1
      })
        .then(response => {
          if (response.list) {
            this.recognitionSubModelsList = response.list;
          }
        })
        .catch(() => {});
    },
    // =================== 上部分多选区域点击事件部分 ==================== //
    handle_d_a_CheckAllChange(val) {
      this.filterForm.deviceAreasCheckList = val
        ? this.deviceAreasList.map(item => {
            return item.id;
          })
        : [];
      this.filterTree();
    },
    //
    handle_d_t_CheckAllChange(val) {
      this.filterForm.deviceTypeCheckList = val
        ? this.deviceTypeList.map(item => {
            return item.id;
          })
        : [];
      this.filterTree();
    },
    //
    handle_r_t_CheckAllChange(val) {
      this.filterForm.recognitionTypeCheckList = val
        ? this.recognitionTypeList.map(item => {
            return item.id;
          })
        : [];
      this.filterTree();
    },
    //
    handle_m_t_CheckAllChange(val) {
      this.filterForm.meterTypeCheckList = val
        ? this.meterTypeList.map(item => {
            return item.id;
          })
        : [];
      this.filterTree();
    },
    //
    handle_d_a_t_CheckAllChange(val) {
      this.filterForm.deviceAppearanceTypeCheckList = val
        ? this.deviceAppearanceTypeList.map(item => {
            return item.id;
          })
        : [];
      this.filterTree();
    },
    // =================== 设备树相关的逻辑 ==================== //
    //
    deepRecursionTraversal(node) {
      node.map(item => {
        if (item.children) {
          this.deepRecursionTraversal(item.children);
        } else {
          if (item.points) {
            // item.children = item.points;
            item.points = item.points.map(item => {
              item.id = "point_" + item.id;
              item.leaf = true;
              return item;
            });
            this.deepRecursionTraversal(item.points);
          } else {
            //
          }
        }
        return item;
      });
      return node;
    },
    //
    filterTree() {
      let rev = node => {
        let temp = node.filter(item => {
          if (item.modelLevel) {
            if (item.modelLevel === 1000) {
              if (item.children && item.children.length > 0) {
                //
              } else {
                // return false;
              }
            }
            if (item.modelLevel === 1010) {
              if (item.children && item.children.length > 0) {
                //
              } else {
                // return false;
              }
              if (
                this.filterForm.deviceAreasCheckList.some(
                  d_a_item => d_a_item === item.id
                ) ||
                this.filterForm.deviceAreasCheckList.length <= 0
              ) {
                //
              } else {
                return false;
              }
            }
            if (item.modelLevel === 1100) {
              if (item.children && item.children.length > 0) {
                //
              } else {
                // return false;
              }
            }
            if (item.modelLevel === 1150) {
              if (item.children && item.children.length > 0) {
                //
              } else {
                // return false;
              }
            }
            if (item.modelLevel === 1200) {
              if (item.points && item.points.length > 0) {
                //
              } else {
                // return false;
              }
              if (
                this.filterForm.deviceTypeCheckList.some(
                  d_t_item => d_t_item === item.deviceTypeId
                ) ||
                this.filterForm.deviceTypeCheckList.length <= 0
              ) {
                //
              } else {
                return false;
              }
            }
          }
          if (item.children) {
            item.children = rev(item.children);
          } else {
            if (item.points) {
              item.points = item.points.filter(potntItem => {
                if (
                  (this.filterForm.recognitionTypeCheckList.some(
                    r_t_item => r_t_item === potntItem.reconTypeId
                  ) ||
                    this.filterForm.recognitionTypeCheckList.length <= 0) &&
                  (this.filterForm.meterTypeCheckList.some(
                    m_t_item => m_t_item === potntItem.meterTypeId
                  ) ||
                    this.filterForm.meterTypeCheckList.length <= 0) &&
                  (this.filterForm.deviceAppearanceTypeCheckList.some(
                    d_a_t_item => d_a_t_item === potntItem.faceTypeId
                  ) ||
                    this.filterForm.deviceAppearanceTypeCheckList.length <=
                      0) &&
                  (this.filterForm.isUse !== null
                    ? potntItem.isUse === this.filterForm.isUse
                    : true)
                ) {
                  this.deviceTreeCheckList.push(potntItem.id);
                  return true;
                } else {
                  return false;
                }
              });
              item.points = rev(item.points);
            }
          }

          return true;
        });
        return temp;
      };

      this.deviceTreeCheckList = [];
      let tempList = JSON.parse(JSON.stringify(this.AllDeviceTreeList));
      this.deviceTreeList = rev(tempList);
      if (
        this.filterForm.deviceAreasCheckList <= 0 &&
        this.filterForm.deviceTypeCheckList <= 0 &&
        this.filterForm.recognitionTypeCheckList <= 0 &&
        this.filterForm.meterTypeCheckList <= 0 &&
        this.filterForm.deviceAppearanceTypeCheckList <= 0
      ) {
        this.deviceTreeCheckList = [];
      }
      if (this.deviceTreeList.length > 0) {
        this.getPointsList(this.deviceTreeList[0]);
      }
    },

    getPointsList(data) {
      if (data.modelLevel) {
        if (data.modelLevel === 1000) {
          this.treePointList = this.filterPointsList(
            this.deviceTreeList
          ).filter(item => {
            if (
              item.point &&
              item.substation &&
              item.substation.id === data.id
            ) {
              return true;
            } else {
              return false;
            }
          });
        }
        if (data.modelLevel === 1010) {
          this.treePointList = this.filterPointsList(
            this.deviceTreeList
          ).filter(item => {
            if (item.point && item.area && item.area.id === data.id) {
              return true;
            } else {
              return false;
            }
          });
        }
        if (data.modelLevel === 1100) {
          this.treePointList = this.filterPointsList(
            this.deviceTreeList
          ).filter(item => {
            if (item.point && item.interval && item.interval.id === data.id) {
              return true;
            } else {
              return false;
            }
          });
        }
        if (item.modelLevel === 1150) {
          this.treePointList = this.filterPointsList(
            this.deviceTreeList
          ).filter(item => {
            if (
              item.point &&
              item.subclassDevice &&
              item.subclassDevice.id === data.id
            ) {
              return true;
            } else {
              return false;
            }
          });
        }
        if (data.modelLevel === 1200) {
          this.treePointList = this.filterPointsList(
            this.deviceTreeList
          ).filter(item => {
            if (item.point && item.device && item.device.id === data.id) {
              return true;
            } else {
              return false;
            }
          });
        }
      } else {
        this.treePointList = this.filterPointsList(this.deviceTreeList).filter(
          item => {
            if (item.point && item.point.id === data.id) {
              return true;
            } else {
              return false;
            }
          }
        );
      }
      this.getPointHistoryList();
    },
    filterPointsList(data) {
      var result = [];
      _search(data, []);
      return result;

      function _search(nodes, path) {
        if (!nodes || nodes.length <= 0) {
          var obj = {};
          for (var item in path) {
            Object.assign(obj, path[item]);
          }
          return result.push(obj);
        }

        for (let i = 0; i < nodes.length; i++) {
          let node = nodes[i];
          if (node.modelLevel) {
            if (node.modelLevel === 1000) {
              path.push({ substation: node });
            }
            if (node.modelLevel === 1010) {
              path.push({ area: node });
            }
            if (node.modelLevel === 1100) {
              path.push({ interval: node });
            }
            if (node.modelLevel === 1150) {
              path.push({ subclassDevice: node });
            }
            if (node.modelLevel === 1200) {
              path.push({ device: node });
            }
          } else {
            path.push({ point: node });
          }

          if (node.children) {
            _search(node.children, path);
          } else {
            _search(node.points, path);
          }
          path.pop();
        }
      }
    },
    // paginationSet() {
    //   this.pointsTotal = this.pointsList.length;
    //   this.nPageSizes[0] = this.pointsList.length;
    //   this.pointsQuery.page = 1;
    //   this.pointsQuery.size = this.pointsList.length;
    // },
    //
    handleCheckChange(val) {
      this.filterTree();
    },
    // =================== 中间事件筛选及查询一栏 ==================== //
    // =================== 下面历史任务列表事件 ==================== //
    onRowClick(row, column, event) {
      this.checkTask = row;
      this.getPointHistoryList();
    },
    // =================== 点位列表事件 ==================== //
    pointRowClick(row, column, event) {
      this.checkPoint = row;
      this.checkPoint.value =
        this.checkPoint && this.checkPoint.value
          ? parseFloat(this.checkPoint.value).toFixed(3)
          : this.checkPoint.value;
      this.getPointsSetting();
      this.picList = [];
      if (row.point && row.point.saveTypeId === 1) {
        this.picList.push({
          url: row.flirPic,
          name: "红外"
        });
      }
      if (row.point && row.point.saveTypeId === 2) {
        this.picList.push({
          url: row.cameraPic,
          name: "可见光"
        });
      }
      if (row.point && row.point.saveTypeId === 4) {
        this.picList.push(
          {
            url: row.flirPic,
            name: "红外"
          },
          {
            url: row.cameraPic,
            name: "可见光"
          }
        );
      }

      this.$nextTick(() => {
        if (this.viewer) {
          this.viewer.destroy();
          this.viewer == null;
        }

        const ViewerDom = document.getElementById("content_third");
        const viewer = new Viewer(ViewerDom, {
          // 相关配置项,详情见下面
          show: function() {
            viewer.update();
          }
        });
      });
    },
    // =================== 图片展示事件 ==================== //
    // =================== 图片参数设置事件 ==================== //
    saveClick() {
      this.pointSetting[
        "PointVisibleLightRequest"
      ] = this.pointSetting.pointVisibleLight;
      this.pointSetting[
        "MeterPointInfoRequest"
      ] = this.pointSetting.meterPointInfo;
      pointsUpdate(this.pointSetting, this.checkPoint.point.id)
        .then(response => {
          this.setOperationLogs("修改-表计校正-" + this.pointSetting.name);
          this.getPointsSetting();
          this.$message({
            message: "编辑成功!",
            type: "success"
          });
        })
        .catch(() => {});
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    },
    // 匹配类型返回
    matchArrayContentStr(val, array) {
      return matchArrayContent(val, array);
    }
  }
};
</script>

<style>
.SetImageSetting {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}
.SetImageSetting .filter {
  position: relative;
  width: 100%;
  background-color: #eeeeee;
}

.SetImageSetting .filter .el-form-item {
  margin-top: 0;
  margin-bottom: 3px;
}
.SetImageSetting .filter .el-form-item__label {
  font-size: 13px;
  line-height: 26px;
}
.SetImageSetting .filter .el-form-item__content {
  font-size: 13px;
  line-height: 26px;
}
.SetImageSetting .filter .el-radio__label {
  font-size: 13px;
}
.SetImageSetting .filter .el-checkbox {
  font-size: 13px;
}
.SetImageSetting .filter .el-checkbox__label {
  font-size: 13px;
  padding-left: 6px;
}
.SetImageSetting .filter .el-radio {
  width: 210px;
  margin-left: 10px;
}
.SetImageSetting .filter .el-radio + .el-radio {
  margin-left: 10px;
}
.SetImageSetting .filter .el-checkbox {
  width: 210px;
  margin-left: 10px;
}
.SetImageSetting .filter .el-checkbox + .el-checkbox {
  margin-left: 10px;
}

.SetImageSetting .content {
  width: 100%;
  min-height: 360px;
  flex-grow: 1;
}

.SetImageSetting .el_consist {
  width: calc(100% - 220px);
  float: left;
  overflow: hidden;
}

.SetImageSetting .allCheckBox {
  float: left;
}

.SetImageSetting .moreCheckBox {
  float: right;
}

.SetImageSetting .operation {
  width: 100%;
  height: 30px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
  border-top: 1px solid rgb(202, 231, 238);
}
.SetImageSetting .operation .el-form-item {
  margin-top: 0;
  margin-bottom: 0;
  float: left;
}
.SetImageSetting .operation .el-form-item__content {
  width: 200px;
  margin-left: 5px !important;
}
.SetImageSetting .operation .el-form-item__content {
  /* width: 200px; */
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}
.SetImageSetting .operation .el-date-editor.el-input {
  width: 200px;
}
.SetImageSetting .operation .el-input__inner {
  height: 26px;
  line-height: 26px;
}
.SetImageSetting .operation .el-input__icon {
  line-height: 26px;
}

.SetImageSetting .but-query,
.SetImageSetting .but-save {
  height: 30px;
  margin-left: 20px;
  margin-right: 10px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: left;
}

.SetImageSetting .but-save {
  float: right;
}

.SetImageSetting .query-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/query.png);
  background-size: 100% 100%;
  float: left;
}

.SetImageSetting .save-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/save.png);
  background-size: 100% 100%;
  float: left;
}

.SetImageSetting .block-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}

.SetImageSetting .content-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 27px);
}

.SetImageSetting .content-first {
  position: relative;
  width: 25%;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid rgb(202, 231, 238);
  float: left;
}
.SetImageSetting .content-second {
  position: relative;
  width: 25%;
  height: 100%;
  background-color: #fff;
  border-left: 1px solid rgb(202, 231, 238);
  float: left;
}
.SetImageSetting .content-third {
  position: relative;
  width: 25%;
  height: 100%;
  background-color: #fff;
  border-left: 1px solid rgb(202, 231, 238);
  float: left;
  overflow: hidden;
}

.SetImageSetting .content-third ul {
  width: 100%;
  height: 100%;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  overflow-y: auto;
  white-space: nowrap;
}

.SetImageSetting .content-third .item-img {
  width: 100%;
}

.SetImageSetting .four-content {
  height: calc(100% - 27px);
  width: 100%;
  padding-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}

.SetImageSetting .content-four {
  position: relative;
  width: 25%;
  height: 100%;
  background-color: #fff;
  border-left: 1px solid rgb(202, 231, 238);
  float: left;
  overflow: hidden;
}

.SetImageSetting .content-four .el-form-item {
  margin-bottom: 5px;
  overflow-x: hidden;
  white-space: nowrap;
}

.SetImageSetting .content-four .el-select {
  display: block;
}
</style>